<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>他人個版</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.elastic.source.js"></script>
<script src="../js/jquery.jscroll.js"></script>

<style>
body {
	overflow-x:hidden;
}
.membername{
	position: absolute;
	top: 4px;
	left: 240px;
	font-size: 36px;
}

.memberselfintro{
	position:absolute;
	top:84px; 
	left: 210px; 
	display: block; 
	width:350px; 
	height:250px;
}

.memberinfo{
	position:absolute;
	top:0px; 
	left: 260px; 
	display: block; 
	width:350px; 
	height:250px;
}

.waterwheelcarousel {
    width:800px;
    height: 300px;
    display: relative;
    position: absolute;
    top: -200px;
    left:-200px;
}

.waterwheelcarousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
}
  
.block {
	position: relative;
	border-style: outset;
	border-color: orange;
	border-radius: 60px;
	border-width: 7px;
	margin: 30px auto;
	background-image:url('../images/paperbackground.jpg');
	box-shadow: 10px 10px 15px black;
	width: 80%;
	min-height:250px;
}
.block2 {
	border-color: yellow;
}
.thumbnail {
	position: relative;
	border-style: outset;
	border-color: black;
	border-radius: 40px; 	
	box-shadow: 2px 2px 2px black; 
	margin:30px;
	left:0px;
	top:10px;
}
.textblock {	
	display:inline-block;
	border-style: outset;
	border-color: white;
	border-radius: 60px;
	border-width: 2px;
	padding:8px;
	background-image:url('../images/paperbackground_white.jpg');
	box-shadow: 2px 2px 2px black;
}
.catinfoblock {
	display:inline-block;
	text-align:center; 
	width: 260px; 
	padding: 10px; 
	line-height:30px;
}
.block td{
width:115px;
text-align:center;
}
</style>

<script>

$(function() {
		$( ".elastic" ).elastic();
		$( '.scroll' ).jscroll();
		$(".block").hover(function(){
			$(this).toggleClass("block2",300).clearQueue();
		});
});

</script>

</head>

<body>
	
	<p style="position:relative;">
	<img src="../images/cat.jpg" width="160" height="160" style="border-radius: 25px;">
	<span style="text-align: center; font-family: '微軟正黑體';">
	<span class="membername">美江</span>
	<span class="memberinfo">生日：1980/5/25<br>
	E-mail：sdf8666@gmail.com<br>
	性別：icon-female<br></span>
	<span class="memberselfintro">大家好，我叫做美江，今年剛加入CCC這個大家庭，我非常喜歡鑽石，歡迎對鑽石有研究的朋友加我好友，我們可以多多討論喔~</span>
	</span>
	</p>
	
	
	
	
	
	
	
		<div class="block">
	<table>
<tr>
  <td><img src="../images/cat2.jpg" onclick="" width="160" height="auto" class="thumbnail"></td>
  <td><div class="textblock">小白大白貓</div></td> 
  <td><div class="catinfoblock"><div>出生年：1990</div><div>品種：米克斯</div><div>性別：icon-male</div><div>簡介：這是小白，我養的第二隻貓~</div></div></td>
</tr>
</table>
		</div>
	
	
			<div class="block">
	<table>
<tr>
  <td><img src="../images/cat3.jpg" onclick="" width="160" height="auto" class="thumbnail"></td>
  <td><div class="textblock">小花加菲貓</div></td> 
  <td><div class="catinfoblock"><div>出生年：1990</div><div>品種：米克斯</div><div>性別：icon-male</div><div>簡介：這是小白，我養的第二隻貓~</div></div></td>
</tr>
</table>
		</div>
		
		
				<div class="block">
	<table>
<tr>
  <td><img src="../images/cat4.jpg" onclick="" width="160" height="auto" class="thumbnail"></td>
  <td><div class="textblock">喵喵</div></td> 
  <td><div class="catinfoblock"><div>出生年：1990</div><div>品種：米克斯</div><div>性別：icon-male</div><div>簡介：這是小白，我養的第二隻貓~</div></div></td>
</tr>
</table>
		</div>
		
		
				<div class="block">
	<table>
<tr>
  <td><img src="../images/cat.jpg" onclick="" width="160" height="auto" class="thumbnail"></td>
  <td><div class="textblock">小</div></td> 
  <td><div class="catinfoblock"><div>出生年：1990</div><div>品種：米克斯</div><div>性別：icon-male</div><div>簡介：這是小白，我養的第二隻貓~不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我，不要欺負我。</div></div></td>
</tr>
</table>
		</div>
	
	
	<h1>這裡放這個人的貼文</h1>
	
	
</body>

</html>